.{$checkbox-prefix}
  user-select none
  display inline-block

  .{$checkbox-prefix}
    &-text
      font-size $font-size-mini
    &-icon
      display inline-block
      position relative
      width 16px
      height 16px
      margin-right 5px
      vertical-align -3px
      outline none
      cursor pointer
      box-sizing border-box
      border 1px solid $gray4-color
      border-radius $border-radius-size
      &:after
        content ''
        display inline-block
        position absolute
        top 1px
        left 4px
        width 4px
        height 8px
        border 2px solid $white-color
        border-top 0
        border-left 0
        transition $transition-time
        transform rotate(45deg) scale(0)
    &-disabled
      pointer-events none
      cursor not-allowed
      color $gray3-color
  .{$checkbox-prefix}-checked, .{$checkbox-prefix}-indeterminate
    .{$checkbox-prefix}-icon
      background-color $primary-color
      border 1px solid $primary-color
  .{$checkbox-prefix}-icon
    &[disabled], &[readonly]
      pointer-events none
      cursor not-allowed
      border-color $gray3-color
      background-color $gray3-color
      &[disabled][checked]
        background-color $gray3-color
        &:after
          border-color $white-color
  .{$checkbox-prefix}-checked
    .{$checkbox-prefix}-icon
      &:after
        transform rotate(45deg) scale(1)
  .{$checkbox-prefix}-indeterminate
    .{$checkbox-prefix}-icon
      &:after
        content ''
        width 8px
        height 0
        left 2px
        top 6px
        transform rotate(0deg) scale(1)
  label
    &:hover
      .{$checkbox-prefix}-icon
        border 1px solid $primary-color
